<template>

	<web-view style="width: 100%;" src="../../static/hybrid/index.html" @message="handleWebViewMessage"
		@onPostMessage="handleWebViewMessage"></web-view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		request
	} from '@/utils/request'
	import CustomTabbar from '@/components/custom-tabbar.vue'

	// const base64Data =
	// 	''; // 示例Base64

	// const img = ref("https://www.html5plus.org/images/material.png")

	// const has = ref(true)

	// import Test4Vue from './Test4.vue';


	onMounted(() => {

		// uni.setNavigationBarTitle({
		// 	title: '视频截图'
		// });
	})


	const handleWebViewMessage = async (e) => {
		console.log("e.detail", e.detail)
		const message = e.detail.data[0];

		uni.showLoading({
			title: "截图上传"
		})

		if (message.action === 'saveImage' && message.url) {
			const rs = await request.uploadBase64("/upload/base64", message.url)

			const {
				tempFilePath
			} = await uni.downloadFile({
				url: rs.data.path
			});
			uni.hideLoading()

			await uni.saveImageToPhotosAlbum({
				filePath: tempFilePath
			});

			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		}
	};

	const downloadAndSaveImage = async (base64Data) => {
		uni.showLoading({
			title: '保存中...',
			mask: true
		});
		try {
			const tempFilePath = await base64ToTempFile(base64Data);
			await checkPermissionAndSave(tempFilePath);
			uni.showToast({
				title: '保存成功'
			});
		} catch (err) {
			console.log(err)
			uni.showToast({
				title: '保存失败: ' + err.message,
				icon: 'none'
			});
		} finally {
			uni.hideLoading();
		}
	};

	const base64ToTempFile = (base64Data) => {
		return new Promise((resolve, reject) => {
			// 清理 Base64 前缀
			const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
			const dirPath = plus.io.convertLocalFileSystemURL(plus.io.PUBLIC_DOCUMENTS);
			const tempFilePath = `_doc/temp_${Date.now()}.png`;

			console.log("tempFilePath -------", tempFilePath)

			plus.io.resolveLocalFileSystemURL(
				tempFilePath,
				(entry) => {
					entry.createWriter(
						(writer) => {
							writer.onwriteend = () => resolve(tempFilePath);
							writer.onerror = (err) => reject(new Error('文件写入失败: ' + err.message));
							writer.write(base64, {
								type: 'base64'
							});
						},
						(err) => reject(new Error('文件创建失败: ' + err.message))
					);
				},
				(err) => reject(new Error('文件路径解析失败: ' + err.message))
			);
		});
	};

	const checkPermissionAndSave = async (tempFilePath) => {
		const {
			authSetting
		} = await uni.getSetting();
		if (!authSetting['scope.writePhotosAlbum']) {
			const {
				confirm
			} = await uni.showModal({
				title: '权限申请',
				content: '需要相册权限才能保存图片',
			});
			if (!confirm) throw new Error('用户拒绝授权');
			await uni.authorize({
				scope: 'scope.writePhotosAlbum'
			});
		}
		await uni.saveImageToPhotosAlbum({
			filePath: tempFilePath
		});
	};
</script>

<style lang="scss" scoped>
	.boxs {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>